<template>
  <div class="boss" >
    <div class="boss-right">
      <h3 style="text-align: center;"><strong>常见功能</strong></h3>
      <div class="container">

        <div class="item">
          <div class="in">
            <img src="@/assets/icons/chart/outHouse.png" style="width: 100%;height: 100%">
          </div>
          <router-link class="link-type" :to="'/shop/sellGoods'" style="color: #333333">出库管理</router-link>
        </div>

        <div class="item">
          <div class="in">
            <img src="@/assets/icons/chart/house.png" style="width: 100%;height: 100%">
          </div>
          <router-link class="link-type" :to="'/shop/house'" style="color: #333333">仓库管理</router-link>
        </div>

        <div class="item">
          <div class="in">
            <img src="@/assets/icons/chart/outExamine.png" style="width: 100%;height: 100%">
          </div>
          <router-link class="link-type" :to="'/shop/sellGoodsConfirm'" style="color: #333333">出库审核</router-link>
        </div>

        <div class="item">
          <div class="in">
            <img src="@/assets/icons/chart/intHouse.png" style="width: 100%;height: 100%">
          </div>
          <router-link class="link-type" :to="'/shop/purchaseGoods'" style="color: #333333">入库管理</router-link>
        </div>

        <div class="item">
          <div class="in">
            <img src="@/assets/icons/chart/inventory.png" style="width: 100%;height: 100%">
          </div>
          <router-link class="link-type" :to="'/shop/record'" style="color: #333333">库存盘点</router-link>
        </div>

        <div class="item">
          <div class="in">
            <img src="@/assets/icons/chart/inExamine.png" style="width: 100%;height: 100%">
          </div>
          <router-link class="link-type" :to="'/shop/purchaseGoodsConfirm'" style="color: #333333">入库审核</router-link>
        </div>

      </div>
    </div>
    <div class="boss-center" style="background-color:#f8f8f8">
      <div class="boss-inside" style="width: 100%;height: 200px;background-color: #FFFFFF">
        <p style="text-align: center;font-size: 20px"><strong>当前库存</strong></p>
        <hr>
        <p style="text-align: center;font-size: 20px;" ><strong>{{ recordInventory }}</strong></p>
      </div>


    </div>

    <div class="boss-sellPurchase" >
      <div class="boss-sell">
        <div class="boss-sell-top" style="margin-top: 10px;width: 100%;height: 20%">
          <p style="text-align: center;font-size: 20px"><strong>待出库订单件</strong>
            <el-button style="float:right;color:#71e2a3;background-color: #e7faf0;border-color: #d0f5e0;" size="mini">
              <router-link class="link-type" :to="'/shop/sellGoodsConfirm'" style="color: #333333">查看</router-link>
            </el-button></p>
        </div>
        <hr>
        <p style="text-align: center;font-size: 30px">{{sellNumber}}</p>
      </div>

      <div class="boss-purchase">
        <div class="boss-purchase-top" style="margin-top: 10px;width: 100%;height: 20%">
          <p style="text-align: center;font-size: 20px"><strong>待入库订单件</strong>
            <el-button style="float:right;
            color:#71e2a3;background-color: #e7faf0;border-color: #d0f5e0;" size="mini">
              <router-link class="link-type" :to="'/shop/purchaseGoodsConfirm'" style="color: #333333">查看</router-link>
            </el-button></p>
        </div>
        <hr>
        <p style="text-align: center;font-size: 30px">{{ purchaseNumber }}</p>
      </div>
    </div>

    <div ref="echarts" class="boss-left"></div>
  </div>

</template>

<script>

import { purchaseNumAndDate, sellNumAndDate } from '@/api/shop/chart'
import { getPurchaseNumConfirm } from '@/api/shop/purchaseGoods'
import { getSellNumConfirm } from '@/api/shop/sellGoods'
import { getRecordInventory } from '@/api/shop/record'

export default {
  name: 'index',
  props:{
    size:{
      type:Number,
      default:100
    },
    colorSize:{
      type: String,
      default: 'white'
    },
    color:{
      type: String,
      default: 'red'
    }
  },
  data(){
    return {
      purchaseNumData:[], //入库数量
      sellNumData:[],//出库数量
      purchaseDate:[],//入库时间
      sellDate:[],//出库时间
      sellConfirmStatus:'0',//出库待确定状态
      purchaseConfirmStatus: '0',//入库待确定状态
      sellNumber:null,//出库数量
      purchaseNumber:null,//入库数量
      recordInventory:''
    }
  },
  created() {
    this.getNumList();
    this.getSellPurchaseNum();
  },
  mounted() {
    let chart = this.$echarts.init(this.$refs.echarts)
    chart.setOption({
      title: {
        text: "仓库出入明细",
        left: 'center',
        textStyle:{
          color: '#333',
          fontSize:20
        }
      },
      tooltip: {},
      legend: {
        data: ["出库数量","入库数量"],
        orient: 'vertical',
        top: 'bottom',
        right:'5%'
      },
      xAxis: {
        data: [],
      },
      yAxis: {},
      series:[]
    })
  },
  methods: {
    async getSellPurchaseNum(){
      getPurchaseNumConfirm(this.purchaseConfirmStatus).then(res=>{
        console.log('出库数量...........',res.data)
        this.purchaseNumber = res.data
      });

      getSellNumConfirm(this.sellConfirmStatus).then(resp=>{
        console.log('入库数量.........',resp.data)
        this.sellNumber = resp.data
      })


      getRecordInventory().then(res=>{
        console.log('当前库存件',res.data)
        this.recordInventory = res.data
      })

    },
      async getNumList() {
        try {
          // 等待两个 Promise 同时解决
          const [purchaseResponse, sellResponse] = await Promise.all([
            purchaseNumAndDate(),
            sellNumAndDate(),
          ]);

          // 处理入库数据
          this.purchaseNumData = purchaseResponse.data.map(num => num.purchaseQuantity);
          this.purchaseDate = purchaseResponse.data.map(data => data.date);
          console.log('入库数量', this.purchaseNumData);
          console.log('入库时间', this.purchaseDate);

          // 处理出库数据
          this.sellNumData = sellResponse.data.map(num => num.sellQuantity);
          this.sellDate = sellResponse.data.map(data => data.date);
          console.log('出库数量', this.sellNumData);
          console.log('出库时间', this.sellDate);

          // 合并日期并调整数据
          const allDates = [...new Set([...this.purchaseDate, ...this.sellDate])].sort();

          const adjustedPurchaseNumData = allDates.map(date => {
            const index = this.purchaseDate.indexOf(date);
            return index !== -1 ? this.purchaseNumData[index] : 0;
          });

          const adjustedSellNumData = allDates.map(date => {
            const index = this.sellDate.indexOf(date);
            return index !== -1 ? this.sellNumData[index] : 0;
          });

          // 更新图表
          this.$echarts.init(this.$refs.echarts).setOption({
            xAxis: {
              data: allDates,
            },
            series: [
              {
                name: "入库数量",
                type: "bar",
                data: adjustedPurchaseNumData,
                label:{
                  show: true,
                  position: 'top',
                  valueAnimation: true
                },
                barWidth: '5%'
              },
              {
                name: "出库数量",
                type: "bar",
                data: adjustedSellNumData,
                label:{
                  show: true,
                  position: 'top',
                  valueAnimation: true
                },
                barWidth: '5%'
              },
            ],
          });
        } catch (error) {
          console.error('Error fetching data:', error);
        }
      },
    },
  }
</script>

<style scoped>
.boss{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content:  space-between;
  flex-flow: row wrap;
  background-color: #f8f8f8;
}
/*.boss-left{
  height: 450px;
  width: 100%;
  margin-top: 100px;
!*  background-color: #1ab394;*!
}*/
.boss-left {
  width: 100%;
  height: 50vh; /* 使用视口高度单位 */
  margin-top: 2vh; /* 使用视口高度单位 */
  margin-top: 100px;
}
.boss-center, .boss-right {
  width: calc(50% - 25px); /* 假设您希望它们各占一半减去一些间距 */
  height: auto; /* 让高度自适应内容 */
  margin: 10px;
}
.boss-center{
  height: 400px;
  margin-left: 50px;
  margin-right: 50px;
  width: 400px;
/*  background-color: sandybrown;*/
}
/*.container {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  height: 350px;
!*  background-color: pink;*!
  justify-content: space-between;
}*/
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; /* 改进间距分布 */
  width: 100%;
  padding: 10px;
  box-sizing: border-box; /* 防止内边距和边框增加元素的总宽度 */
}

.item {
  flex: 1 1 calc(33.333% - 20px); /* 使用 flex 属性来分配空间 */
  margin: 10px;
}
/*.item {
  width: 90px;
  height: 100px;
  margin-left: 10px;
  margin-top: 5px;
}*/
.boss-right{
  width: 300px;
  height: 350px;
  margin-left: 200px;
  background-color: #f8f8f8;
}
.container .item .in{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-position: center; /* 确保图片居中 */
  background-repeat: no-repeat; /* 防止图片重复 */
}
.container .item span{
  margin-top: 5px;
}

.center-container{
  width: 95%;
  height: 300px;
  background-color: #FFFFFF;
}
.boss-sellPurchase{
  height: 350px;
  width: 550px;
  margin-right: 50px;
  /*background-color: pink;*/
}
.boss-sell{
  width: 100%;
  height: 45%;
  margin-bottom: 20px;
  background-color: #FFFFFF;
}
.boss-purchase{
  width: 100%;
  height: 50%;
  background-color: #FFFFFF;
}
</style>
